<template>
    <div class="leftMenu">
        <el-menu
            :router="true"
            :default-active="active"
            class="el-menu-vertical-demo"
            background-color="rgb(0, 21, 41)"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="1" route="/">
                <i class="el-icon-location"></i>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="2" route="/scene">
                <i class="el-icon-menu"></i>
                <span slot="title">工厂实景</span>
            </el-menu-item>
            <el-menu-item index="3" route="/factoryList">
                <i class="el-icon-document"></i>
                <span slot="title">预约到访工厂</span>
            </el-menu-item>
            <el-menu-item index="4" route="/newPro">
                <i class="el-icon-setting"></i>
                <span slot="title">工厂新品</span>
            </el-menu-item>
            <!-- <el-menu-item index="5">
                <i class="el-icon-setting"></i>
                <span slot="title">客户中心</span>
            </el-menu-item> -->
        </el-menu>
    </div>
</template>

<script>
    export default {
        name:'leftMenu',
        data() {
            return {
                active: "1"
            }
        },
        mounted () {
            
           
            let that = this;
            setTimeout(() => {
                let route = that.$route;
                let path = route.path;
                console.log('path', path);
                switch (path) {
                    case '/scene':
                        that.active = '2';
                        break;
                    case '/factoryList':
                    case '/factoryAdd':
                        that.active = '3';
                        break;
                    case '/newPro':
                        that.active = '4';
                        break;
                    default:
                    break;
                }
            }, 100);
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="less" scoped>
.leftMenu{
    text-align: left;
    padding-right: 10px;
    /deep/.el-menu{
        border: none;
    }
}
</style>